<style scoped>
  .min-box{
    text-align: center;
    min-width: 100px;
  }
</style>
<template>
  <modal :visible="visible" @close="close">
    <div class="box">
      <article class="columns is-multiline is-mobile">
        <div class="column" v-for="item in list">
          <div class="min-box" @click="choose(item.type,item.name)">
            <h6 class="title is-6">{{item.name}}</h6>
            <p>{{item.description}}</p>
          </div>
        </div>
      </article>
    </div>
  </modal>
</template>

<script>
import { Modal } from 'vue-bulma-modal'

export default {
  components: {
    Modal
  },

  props: {
    visible: Boolean,
    list: Array
  },

  methods: {
    close () {
      this.$emit('close')
    },

    choose () {
      this.close()
      this.$emit('set',arguments)
    }
  }
}
</script>
